


Zoom inspired AO3 skin

by mystyrust



Series: #ao3_work_skins [2]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Zoom - Freeform, ao3 skin, tutorial
Language: English
Status: Completed
Published: 2020-11-27
Updated: 2020-11-26
Packaged: 2021-03-09 23:49:03
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 320
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/27734851
Author URL: https://archiveofourown.org/users/mystyrust/pseuds/mystyrust
Summary: are your characters stuck in quarantine and attending online zoom classes??? here's a really simple skin for that
Series: #ao3_work_skins [2]
Series URL: https://archiveofourown.org/series/2028784
Kudos: 6
Collections: A Guide to Coding and Fanworks





	1. CSS

**Author's Note:**

  * Inspired by [tired quaranteens](https://archiveofourown.org/works/27314074) by [mystyrust](https://archiveofourown.org/users/mystyrust/pseuds/mystyrust). 



.zoom-chatbox {  
max-width: 300px;  
border: .02em solid #dddddd;  
margin-left: auto;  
background-color: whtie;  
margin-right: auto;  
}

.zoom-title {  
line-height: 1em;  
margin: 0em;  
text-align: center;  
font-weight: bold;  
font-family: "Arial Black", Gadget, sans-serif;  
background-color: #dddddd;  
margin-bottom: 0.5em;  
padding-top: 0.8em;  
padding-bottom: 0.8em;  
}

.zoom-content {  
padding-left: 0.5em;  
padding-bottom: 0.5em;  
}

.zoom-from {  
padding-top: 0.8em;  
font-size: small;  
color: rgb(140,140,140);  
font-family: Tahoma, Geneva, sans-serif;  
}

.zoom-msg {  
font-size: 13.5px;  
font-family: Tahoma, Geneva, sans-serif;  
}

.zoom-private {  
color: red !important;  
font-family: inherit;  
}

.zoom-public {  
color: blue !important;  
}

.zoom-enter-box {  
height: 15px;  
border-top: .02em solid #dddddd;  
margin-top: 1.5em;  
margin-right: 0em;  
margin-left: 0em;  
}


	2. html mockup

**Summary for the Chapter:**

> disclaimer: i have used zoom a total of three (3) times in my life so I based this template off of google image search

using ficbit from [tired quaranteens](https://archiveofourown.org/works/27314074/chapters/66735937) as an example that shows all the css classes being used   
  


<div class="zoom-chatbox">

<p class="zoom-title">

Zoom Webinar Chat <br>

Lancer's English Literature class

</p>

<p class="zoom-content">

<p class="zoom-from">

From Lancer to <span class="zoom-public">Everyone</span>

</p>

<p class="zoom-msg">I'll have you all know that I can read all conversations on Zoom.</p>

<p class="zoom-msg">Even private dms you send to each other.</p>

<p class="zoom-msg">If you wish for your messages to be private, please use some other texting service aside from Zoom.</p>

<p class="zoom-msg">That is all, class.</p>

  


<p class="zoom-from">

From Dash Baxter to <span class="zoom-private">Kwan (privately)</span>

</p>

<p class="zoom-msg"> Phantom's the imposter!</p>

<p class="zoom-msg">*Fenton</p>

</p>

<p class="zoom-enter-box"></p>

</div>

Zoom Webinar Chat  
Lancer's English Literature class 

From Lancer to Everyone

I'll have you all know that I can read all conversations on Zoom.

Even private dms you send to each other.

If you wish for your messages to be private, please use some other texting service aside from Zoom.

That is all, class.

From Dash Baxter to Kwan (privately)

Phantom's the imposter!

*Fenton

kinda wish I added a right chevron to "zoom-enter-box" class but I was on a (self-imposed) time crunch and I might go back and add it later


End file.
